<template>
  <div style="margin-top: 40px">
    <div class="search-box">
      <div style="margin-left: 50px">任务地点搜索：</div>
      <el-input v-model="input" placeholder="请输入任务地点" id="tipinput" style="width: 400px;"></el-input>
    </div>
    <div id="container" style="margin-left: 50px;margin-top: 15px"></div>
    <div style="margin-left: 50px;margin-top: 15px">当前选择位置：{{lnglat}}</div>
    <div style="text-align: center;margin-top: 15px">
      <el-button size="medium" @click="handlePrev">上一步，填写任务信息</el-button>
      <el-button type="primary" size="medium" @click="handleNext">下一步，分配任务</el-button>
    </div>
    <!-- 确认选择位置弹窗 -->
    <div>
      <el-dialog
          v-model="locationDialogVisible"
          title="提示"
          center
          width="25%"
          :custom-class="'rounded-dialog'"
      >
        <el-row>
          <svg t="1708610715791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin-top: 11px;margin-bottom: 10px;margin-left: 10px"
               p-id="6558" width="25" height="25"><path d="M512 147.2C310.528 147.2 147.2 310.528 147.2 512S310.528 876.8 512 876.8 876.8 713.472 876.8 512 713.472 147.2 512 147.2z m0 64c166.144 0 300.8 134.656 300.8 300.8S678.144 812.8 512 812.8 211.2 678.144 211.2 512 345.856 211.2 512 211.2z" fill="#FB553C" p-id="6559"></path><path d="M478.72 462.3104m33.28 0l0 0q33.28 0 33.28 33.28l0 173.056q0 33.28-33.28 33.28l0 0q-33.28 0-33.28-33.28l0-173.056q0-33.28 33.28-33.28Z" fill="#FB553C" p-id="6560"></path><path d="M512 370.7136m-48.64 0a48.64 48.64 0 1 0 97.28 0 48.64 48.64 0 1 0-97.28 0Z" fill="#FB553C" p-id="6561"></path></svg>
          <p class="mx-2" style="margin-left: 5px">确定将当前选择位置作为任务地点吗?</p>
        </el-row>
        <template #footer>
        <span class="dialog-footer" >
          <el-button type="primary"  style="margin-bottom: 10px" @click="this.locationDialogVisible=false">确定</el-button>
          <el-button type="primary" plain style="margin-bottom: 10px" @click="this.locationDialogVisible=false">取消</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: '33ab33ef0084a1b8ecb462f3aaad5bf1'
}
export default {
  name: "ProductSaleDetail",
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      input: "",
      map: null,
      lnglat: [], // [lng,lat]  [longitude,latitude]
      auto: null,
      placeSearch: null,
      markers: [],
      driving: null,
      locationDialogVisible:false
    };
  },
  mounted() {
    this.initMap();
  },
  unmounted() {
    this.map?.destroy();
  },

  computed: {

  },
  methods: {
    addLocationInfo(longitude,latitude){
      return{
        "longitude":longitude,"latitude":latitude
      };
    },
    handlePrev() {
      this.$emit('prevStep')
    },
    handleNext() {
      let locationInfo = this.addLocationInfo(this.lnglat[0],this.lnglat[1]);
      this.$emit('getTaskDetail',locationInfo);
      this.$emit('nextStep')
    },
    initMap() {
      AMapLoader.load({
        key: "52840303d9fe7052a39e82bf2e9be484", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
      })
          .then((AMap) => {
            console.log(AMap);
            this.map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "2D", //  是否为3D地图模式
              zoom: 16, // 初始化地图级别
              center: [117.10978,39.067528], // 初始化地图中心点位置
              resizeEnable: true,
            });
            // 关键字查询
            this.searchMap();
            // 监听鼠标点击事件
            this.map.on("click", this.clickMapHandler);
          })
          .catch((e) => {
            console.log(e);
          });
    },

    // 点击地图事件
    clickMapHandler(e) {
      this.locationDialogVisible=true;
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
    },
    // 关键字查询
    searchMap() {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用联想输入的input的id
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },
    //当选中某条搜索记录时触发
    selectSite(e) {
      console.log("e", e);
      this.lnglat = [e.poi.location.lng, e.poi.location.lat];
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询
    },
    //添加标记
    setMarker(lnglat) {
      this.removeMarker();
      console.log("位置", lnglat);
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    }
  }
}
</script>

<style scoped>
#container {
  width: 90%;
  height: 400px;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
  .label {
    width: 130px;
  }
}
.content {
  position: relative;
}
#panel {
  position: absolute;
  top: 50px;
  right: 20px;
}
#map-container {
  overflow: hidden;
  width: 100%;
  height: 800px;
  margin: 0;
}
</style>